import React, { forwardRef, useImperativeHandle, useState } from 'react';
import { Table } from 'antd';
import { axconst, axconfig } from '@/shared/axconst';

/**
 * 自定义Table组件
 * @param data 列表数据（包含了分页数据）
 * @param columns 列
 * @param loading 加载组件
 * @param checkboxModel 是否展示复选框（默认展示）
 * @param checkboxType 复选框类型checkbox - radio（默认checkbox）
 * @param checkboxFixed 是否固定复选框（默认固定）
 * @param showPagination 是否展示、展示类型（默认false  类型：'mini'）
 * @param scroll 设置滚动条
 * @param showSlider 是否展示顶部滑动条（默认true）
 * @param resizable 能否伸缩列（默认false）
 * @param totalMessage 统计信息（默认null）
 * @param flex 横向24栅格布局（采用此布局后，表格将会固定高度）
 * @param selectedRows 选中的行数据（用于父组件操作）
 * @param scrollY Table滚动条高度
 * @param selectOnClick 是否点击选中（默认true）
 * @param selectFirstRecord 自动选中第一行（默认false）
 * @param onRef 用于父组件引用该组件
 * @param onSelectRow 选中行处理函数
 * @param onChange Table分页、排序、筛选事件的响应函数
 * @param onDoubleClick 双击行处理函数
 */
export const AxTable = forwardRef((props: any, ref: any) => {
  const {
    columns,
    loading,
    data,
    scroll = true,
    showPagination = true,
    onDoubleClick,
    onChange,
    resizable = true,
    showSlider = true,
    totalMessage = null,
    flex,
    scrollY,
    components = {},
    /** 选择功能的配置 */
    checkboxType = 'checkbox',
    onSelectRow,
    checkboxFixed = true,
    getCheckboxProps,
    selectOnClick = true,
    ...rest
  } = props;

  /** 使用 ref 时，自定义暴露给父组件的实例值 */
  useImperativeHandle(ref, () => ({
    cleanSelectedKeys: () => {
      handleRowSelectChange && handleRowSelectChange([], []);
    },
  }));

  /** 选中行的keys */
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  /** 选中的行 */
  const [selectedRows, setSelectedRows] = useState([]);

  /** 点击checkbox选中处理函数 */
  const handleRowSelectChange = (selectedRowKeys: any, selectedRows: any) => {
    setSelectedRowKeys(selectedRowKeys);
    setSelectedRows(selectedRows);
    onSelectRow && onSelectRow(selectedRowKeys);
  };
  /** 点击行选中处理函数 */
  const handleSelectRow = ({ record }: any) => {
    let keys = selectedRowKeys.slice();
    let rows = selectedRows.slice();
    if (getCheckboxProps) {
      const { disabled } = getCheckboxProps(record);
      /** 如果复选框无效，直接返回 */
      if (disabled === true) {
        return;
      }
    }

    if (keys.indexOf(record.id as never) >= 0) {
      keys.splice(keys.indexOf(record.id as never), 1);
      rows.splice(rows.indexOf(record as never), 1);
    } else {
      keys.push(record.id as never);
      rows.push(record as never);
    }
    if (checkboxType === 'radio') {
      keys = [];
      rows = [];
      keys.push(record.id as never);
      rows.push(record as never);
    }

    setSelectedRowKeys(keys);
    setSelectedRows(rows);
    onSelectRow && onSelectRow(keys);
  };
  /** 复选框 */
  const rowSelection = checkboxType
    ? {
        selectedRowKeys,
        onChange: handleRowSelectChange,
        /** 选择框的默认属性配置 */
        getCheckboxProps: getCheckboxProps,
        fixed: checkboxFixed,
        type: checkboxType,
        columnWidth: axconst.width.checkbox,
      }
    : null;

  const tableProps: any = {
    bordered: true,
    size: axconfig.size,
    rowKey: (_: any) => _.id,
    loading: loading,
    dataSource: data,
    columns: columns,
    pagination: false,
    onChange: onChange,
    rowSelection: rowSelection,
    onRow: (record: any) => ({
      onDoubleClick: () => {
        if (onDoubleClick) {
          onDoubleClick(record);
        }
      },
      onClick: (event: any) => {
        if (selectOnClick === true) handleSelectRow({ record, event });
      },
    }),
  };
  // const T = Check({
  //     WrappedComponent: Table,
  //     ...tableProps,
  //     ...rest
  // });

  return <Table {...tableProps} />;
});
